NavigationTaskTreePanel = function(config) {

    this.treeLoader = new Ext.tree.TreeLoader( {
        dataUrl : 'mvc/navigation/tree',
        requestMethod : "GET"
    });

    Ext.apply(this, {
        id : 'navigationTaskTreePanelId',
        title : 'Navigation',
        headerCfg : {
            cls : 'navigation-header'
        },
        iconCls : 'icon-navigation-panel',
        useArrows : true,
        split : true,
        collapsible : true,
        lines : false,
        autoScroll : true,
        loader : this.treeLoader,
        tbar : new Ext.Toolbar( {
            items : [ '->', {
                xtype : 'button',
                text : 'Refresh',
                scale:'medium',
                iconCls : 'button-navigation-refresh',
                handler : function() {
                    this.getRootNode().reload();
                    this.expandAll();
                },
                scope : this
            } ]
        }),
        border : false,
        root : new Ext.tree.AsyncTreeNode( {
            id : 'RootNodeId',
            text : "RootNode",
            expanded : true
        }),
        rootVisible : false
    });

    NavigationTaskTreePanel.superclass.constructor.apply(this, [ config ]);

    this.on('click', function(node, e) {
        this.lastClicked = node;
        this.publish('taskSelected', node);
    }, this);

    this.on('beforerender', function(cmp) {
        cmp.expandAll();
    }, this);

    this.on('expand', function(cmp) {
        this.publish('taskTreePanelExpanded');
    }, this);

    this.subscribe('taskRefresh', function() {
        this.getRootNode().reload();
        this.expandAll();
//        if (this.lastClicked != null) {
//            this.publish('taskSelected', this.lastClicked);
//        }
    }, this);

};

Ext.extend(NavigationTaskTreePanel, Ext.tree.TreePanel, {

        // prevent the default context menu when you miss the node
        afterRender : function() {
            NavigationTaskTreePanel.superclass.afterRender.call(this);
            this.el.on('contextmenu', function(e) {
                e.preventDefault();
            });
            this.treeLoader.on('beforeload', function(treeloader, node, callback) {
                this.el.mask('Loading...', 'x-mask-loading');
            }, this);

            this.treeLoader.on('load', function(treeloader, node, response) {
                this.el.unmask();
            }, this);

            this.treeLoader.on('loadexception', function(treeloader, node, response) {
                this.el.unmask();
            }, this);
        }
    });

Ext.reg('navigationTaskTreePanel', NavigationTaskTreePanel);
